<!-- Home.vue -->
<template>
	<div class="container">
		<!-- 由于html不区分大小写，所以js中驼峰命名方式在html中要改成用短横线连接的形式 -->
		<home-header></home-header>
		<div class="content">
			<ul class="cont_ul">
				<list
					v-for="item in items"
					:price="item.price"
					:title="item.title"
					:img = "item.img">
				</list>
			</ul>
		</div>
	</div>
</template>
<style>
	.container {
		max-width: 640px;
		margin: 0 auto;
		overflow-x: hidden;
	}
	.cont_ul {
		padding-top: 0.05rem;
		margin: 0 -0.12rem;
	}
	.cont_ul:after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		clear: both;
	}
</style>
<script>
	import axios from 'axios'
	// 导入要用到的子组件
	import HomeHeader from '../components/HomeHeader'
	import List from '../components/List'
	export default {
		data () {
			return {
				items: []
			}
		},
		// 在components字段中，包含导入的子组件
		components: {
			HomeHeader,
			List
		},
		created() {
			let that = this;
			axios.get('/api/books').then(function (response) {
				console.log(response.data)
				that.items = response.data.data;
			})
		}
	}
</script>